// @ts-nocheck
import React, { useState } from 'react'
import { Button, Image, Modal, SectionList, Text, TouchableOpacity, View } from 'react-native'
import modalStyles from './styles/modalStyles'
import icon_close_modal from '../../assets/images/icon_close_modal.png';
import { SectionData } from '../../constants/Data';

/* 
- visible                modal 是否显示
- onRequestClose         android按下返回键
- transparent            背景是否透明
- onShow                 回调函数会在 modal 显示时调用
- onDismiss              弹框关闭的回调
- animationType          动画的效果
  - slide 从底部滑入滑出。
  - fade 淡入淡出。
  - none 没有动画，直接蹦出来。
- statusBarTranslucent   弹框是否在系统状态栏下
*/


export default function ModalDemo() {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    console.log('展示弹框');
    
    setVisible(true);
  }

  const hideModal = () => {
    setVisible(false);
  }

  const renderItem = ({ item, index, section } :any) => {
    return (
      <Text style={modalStyles.txt}>{item}</Text>
    );
  };

  const ListHeader = (
    <View style={modalStyles.header}>
      <Text style={modalStyles.extraTxt}>列表头部</Text>
      <TouchableOpacity style={modalStyles.closeButton} onPress={() => hideModal()} >
        <Image style={modalStyles.closeImg} source={icon_close_modal} />
      </TouchableOpacity>
    </View>
  );

  const ListFooter = (
    <View style={[modalStyles.header, modalStyles.footer]}>
      <Text style={modalStyles.extraTxt}>列表尾部</Text>
    </View>
  );

  const renderSectionHeader = ({ section }:any) => {
    return (
      <Text style={modalStyles.sectionHeaderTxt}>{section.type}</Text>
    );
  }


  return (
    <View style={modalStyles.root} >
      <Button title='按钮' onPress={showModal} />
      <Modal
        visible={visible}
        onRequestClose={() => hideModal()}
        transparent={true}
        statusBarTranslucent={true}
        animationType='slide'
        onShow={() => console.log('onShow ...')}
        onDismiss={() => console.log('onDismiss ...')}
      >
        <View style={modalStyles.blank} />
        <View style={modalStyles.content}>
          <SectionList
            style={modalStyles.sectionList}
            sections={SectionData}
            renderItem={renderItem}
            keyExtractor={(item, index) => `${item}-${index}`}
            contentContainerStyle={modalStyles.containerStyle}
            showsVerticalScrollIndicator={false}
            ListHeaderComponent={ListHeader}
            ListFooterComponent={ListFooter}
            renderSectionHeader={renderSectionHeader}
            ItemSeparatorComponent={() =>
              <View style={modalStyles.separator} />
            }
            stickySectionHeadersEnabled={true}
          />
        </View>
      </Modal>

    </View>
  )
}


